<!--
 * @description  :线索编号即投诉举报列表
 * @descriptionDetail:线索编号即投诉举报列表
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-10-31 10:57:44
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon">
        <view @tap="handlerSure">
          确定
        </view>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		 <fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="nolicence-search-lay">
      <u-search
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="请输入线索编号"
        v-model="searchKey"
        @custom="handlerSearch"
      ></u-search>
    </view>
    <view class="content u-page">
      <me-table
        :i="0"
        :index="0"
        :top="116"
        :load-data="loadData"
        :initLoad="false"
        ref="mescrollItem0"
        class="content-list"
      >
        <view slot-scope="d" class="re-list">
          <u-row style="padding: 5px 0px;" @tap="handlerSelectItem(d.data)">
            <u-col span="10">
              <u-row gutter="16" class="report-content">
                <u-col span="12">
                  <view class="title" :class="hasCaseCode(d.data.caseCode) ? 'color-error':''">
                    {{ d.data.clueCode }}({{ d.data.sourceTypeName }})
                  </view>
                </u-col>
                <u-col span="12" class="u-p-b-10">
                  <view>
                    <text class="sub-title">
                      登记日期：
                    </text>{{ d.data.regDate || '/' }}
                  </view>
                </u-col>
                <u-col span="12" class="u-p-b-10">
                  <view>
                    <text class="sub-title">
                      登记单位：
                    </text>{{ d.data.regOrgName }}
                  </view>
                </u-col>
                <u-col span="12" class="u-p-b-10">
                  <view>
                    <text class="sub-title">
                      管辖单位：
                    </text>{{ d.data.managerOrgName || '/' }}
                  </view>
                </u-col>
                <u-col span="12" class="u-p-b-10">
                  <view>
                    <text class="sub-title">
                      当前单位：
                    </text>{{ d.data.curOrgName }}
                  </view>
                </u-col>
                <u-col span="12" class="u-p-b-10" style="padding-left:0">
                  <view style="display: flex">
                    <view style="flex-shrink:0;color:#717579;padding-right: 0;">
                      线索简介：
                    </view>
                    <view style="padding-left:0">
                      {{ d.data.name }}
                    </view>
                  </view>
                </u-col>
              </u-row>
            </u-col>
            <u-col span="2" style="text-align:right;">
              <u-icon
                name="checkbox-mark"
                :color="$theme.u_type_primary"
                size="38"
                style="margin-right: 10px;"
                v-if="selectedUids.includes(d.data.uuid)"
              ></u-icon>
            </u-col>
          </u-row>
        </view>
      </me-table>
    </view>
  </view>
</template>

<script>
	// import MescrollList from "@/components/mescroll_list.vue";
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import meTable from "@/components/me-table.vue";
	import {
		dateUtils,
	} from "@/common/util";
	import caseService from "@/service/case/case.service";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			// MescrollList,
			meTable,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				selectedUids: [], // 选中项的ids
				selectedItems: [], // 选中项
				newList: [],
				isSingle: true, // 是否单选，默认多选
				searchKey: "",
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			};
		},
		onLoad(opt) {},
		methods: {
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					this.handlerSure();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.handlerSure();
				}
			},
			getListViewHeight() {
				let p = (this.$u.sys().windowHeight - 44 - uni.upx2px(90) - this.$u.sys().statusBarHeight) + "px";
				// #ifdef H5-DINGDING || H5-WECHAT
				p = (this.$u.sys().windowHeight - uni.upx2px(90) - this.$u.sys().statusBarHeight) + "px";
				// #endif
				return p;
			},
			handlerSearch() {
				let mescroll = this.getMescroll(0);
				mescroll && mescroll.triggerDownScroll();
			},
			// 选中
			handlerSelectItem(item) {
				if (this.isSingle) {
					this.selectedUids = [item.uuid, ];
					this.selectedItems = [item, ];
					return;
				}
				if (this.selectedUids.includes(item.uuid)) {
					this.selectedItems = this.selectedItems.filter(it => it.uuid != item.uuid);
				} else {
					this.selectedItems.push(item);
				}
				this.selectedUids = [];
				this.selectedItems.forEach(it => this.selectedUids.push(it.uuid));
			},
			// 列表查询数据
			loadData(page) {
				let params = {
					page: page.num,
					limit: page.size,
					paras: {
						clueCode: this.searchKey,
					},
				};
				this.$modal.showLoading("加载中...");
				return new Promise((resolve) => {
					caseService.getReportPage(params).then((res) => {
						this.$modal.hideLoading();
						if (res.success) {
							resolve({
								count: res.count,
								data: [...res.data, ],
							});
						} else {
							resolve({
								count: 0,
								data: [],
							});
						}
					}).catch((err) => {
						this.$modal.hideLoading();
						resolve({
							count: 0,
							data: [],
						});
					});
				});
			},
			// 确定
			handlerSure() {
				// 普通案件选择线索编号
				if (this.selectedItems.length == 0) {
					this.$u.toast("请选择投诉举报记录！");
					return;
				}
				this.backPrev({
					paramKey: 'report',
					param: this.selectedItems,
				});
				this.selectedUids = this.selectedItems = [];
			},
			hasCaseCode(caseCode) {
				if (this.$u.test.isEmpty(caseCode)) return false;
				let tmp = caseCode.replace(/,/g, "");
				if (this.$u.test.isEmpty(tmp)) return false;
				return true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0;
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 32rpx 32rpx;

		.item-box {
			margin-bottom: 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}

	.content-list {
		background-color: #F3F4F5;
	}

	.re-list {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12px;
		padding: 14rpx 8rpx;
	}

	.nolicence-search-lay {
		background-color: #fff;
		position: fixed;
		/* #ifndef H5-ONLY  */
		top: 0px;
		/* #endif */
		/* #ifdef H5-ONLY  */
		top: 45px;
		/* #endif */
		z-index: 999;
		width: 100%;
		overflow: hidden;
		padding: $cm-search-padding-row $cm-search-padding-column;
	}

	.txt-sty {
		line-height: 60rpx;
		padding: 0 10px;
	}

	.u-gap-sty {
		position: relative;
	}

	.search-space-lay {
		background-color: #fff;
		position: fixed;
		top: 0px;
		z-index: 999;
		width: 100%;
		padding: $cm-search-padding-row $cm-search-padding-column;
	}

	.report-content {
		view {
			font-size: 28rpx;
			color: #393B3D;
			padding: 0 5px;
		}

		.title {
			font-size: 32rpx;
			color: #393B3D;
			font-weight: 600;
			margin: 5px 0;
		}

		.sub-title {
			color: #717579;
		}
	}

	.color-error {
		color: $u-type-error !important;
	}

	.errorcls {
		background: #fab6b6;
	}
</style>
